<template>
  <div class="chat-box">
    <div class="chat-content">
      <ul>
        <li class="other-users">
          <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2926199504,3558053336&fm=26&gp=0.jpg" alt="">
          <div class="chat-title">
            <div class="other-users-name">
              <span>张三</span>
              <span>12:21:12</span>
            </div>
            萨达萨达阿德萨达萨达阿德萨达萨达阿德萨达萨达阿德萨达萨达阿德萨达萨达
            萨达萨
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2182041417,4014579840&fm=26&gp=0.jpg" alt="">
            达阿德萨达萨达阿德萨达萨达阿德萨达萨达阿德
            萨达萨达阿德阿德</div>
        </li>
        <li class="other-users my-content">
          <div class="chat-title">
            <div class="other-users-name">
              <span>张三</span>
              <span>12:21:12</span>
            </div>
            萨达萨达阿德萨达萨达阿德萨达萨达阿德萨达萨达阿德萨达萨达阿德萨达萨达
            萨达萨
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2182041417,4014579840&fm=26&gp=0.jpg" alt="">
            达阿德萨达萨达阿德萨达萨达阿德萨达萨达阿德
            萨达萨达阿德阿德</div>
          <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2926199504,3558053336&fm=26&gp=0.jpg" alt="">
        </li>
      </ul>
    </div>
    <div class="chat-input">
      <div class="expression">
        <img src="/images/expression.png" alt="">
        <el-button type="primary" size="mini">发送</el-button>
      </div>
      <div class="textarea-box">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue"
export default {
  setup() {
    const textarea = ref("")
    return {
      textarea
    }
  }
}
</script>

<style scoped lang="scss">
.chat-box {
  height: 100%;
  .chat-content {
    width: 100%;
    height: calc(100% - 150px);
    padding: 10px;
    overflow: auto;
    box-sizing: border-box;
    li {
      margin-bottom: 10px;
    }
    .other-users {
      display: flex;
      > img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 5px;
      }
      > div {
        font-size: 14px;
        flex: 1;
        .other-users-name {
          height: 30px;
          line-height: 30px;
          span {
            margin-right: 10px;
            font-size: 12px;
          }
        }
        img {
          width: 20px;
          height: 20px;
          vertical-align: sub;
        }
      }
    }
    .my-content {
      > .chat-title {
        text-align: right;
      }
    }
  }
  .chat-input {
    width: 100%;
    height: 150px;
    .expression {
      height: 30px;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      padding: 5px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-button {
        margin-right: 10px;
      }
      img {
        height: 30px;
        cursor: pointer;
      }
    }
    .textarea-box {
      height: calc(100% - 42px);
      .el-textarea {
        height: 100%;
        ::v-deep textarea {
          height: 100%;
          resize:none !important;
        }
      }
    }
  }
}
@media screen and (max-width: 900px) {
  .chat-input {
    height: 76px !important;
  }
  .chat-content {
    height: calc(100% - 76px) !important;
  }
}
</style>
